<template
	><div>
		<ant-Button @click="backHistroy">backhistroy</ant-Button>
		<audio
			ref="audio"
			controls
			src="http://m701.music.126.net/20200731180053/f3e9f32d9ae38129e6d63d8a93720d0f/jdymusic/obj/w5zDlMODwrDDiGjCn8Ky/2270179822/2491/6dd5/eafd/7db3a42de108d4d1dbb91fb71d024c28.mp3"
			@canplay="oncanplay"
			@timeupdate="audioUpdate"
			@pause="pause"
		></audio>
		<!-- 声音控制 -->
		<input
			type="range"
			name="voice"
			max="100"
			min="0"
			v-model="playObj.voice.value"
			@change="voiceChange('value', $event)"
		/>

		<div class="bottom flex">
			<div
				class="musicBG"
				:style="{
					// backgroundImage: 'url(' + music.imgUrl + ')',
					animationPlayState: playObj.state ? 'running' : 'paused'
				}"
			>
				<img id="musicImg" :src="music.imgUrl" alt="loading..." title="桃花笑" />
			</div>

			<!-- 进度条 -->

			<div class="progress">
				<div class="relative">
					<!-- 已播放进度 -->
					<div class="showBar bar absolute"></div>
					<div class="bar absolute flex" ref="progressBar">
						<svg
							style="width: 1.4rem; height: 1.4rem;"
							:class="['icon', playObj.state ? 'animationSvg' : '']"
							aria-hidden="true"
						>
							<use xlink:href="#icon--"></use>
						</svg>
					</div>
				</div>
				<!-- 功能按键 -->
				<div class="playButton">
					<div class="flex">
						<div></div>
						<div>
							<span @click="play"
								><ant-icon v-show="!playObj.state" type="caret-left" /><i
									v-show="playObj.state"
									class="iconfont icon-pause"
								></i
							></span>
						</div>
						<div></div>
					</div>
				</div>
			</div>
		</div></div
></template>
<script type="text/javascript">
import json from './music.json';
import { Button, Icon } from 'ant-design-vue';
require('./icon.js');
export default {
	name: 'music',
	data() {
		return {
			music: json,
			playObj: {
				ref: new Object(),
				startTime: 0,
				allTime: Number,
				sort: {
					reload: false,
					next: true,
					random: false
				},
				voice: {
					value: 10
				},
				// state false暂停 true正在播放
				state: false,
				icon: {
					PCT: Number
				}
			}
		};
	},
	created() {},
	mounted() {
		//
		this.init();
		this.playObj.icon.PCT =
			this['$refs'].progressBar.firstChild.clientWidth / this['$refs'].progressBar.clientWidth;
		let _const = this;
		console.log(this['$refs']);
		var div = this.$refs.progressBar;
		var disx, disy;
		div.addEventListener('mousedown', function (e) {
			console.log(e, 'e');
			disx = e.pageX - parseInt(div.style.left); //记录鼠标当前的位置
			disy = e.pageY - parseInt(div.style.top);
			document.addEventListener('mousemove', mouseM);
			function mouseM(e) {
				var event = e || window.event; //兼容了ie浏览器
				if (event.offsetX > 0) {
					console.log(e, 'move', event.offsetX);
				}

				// div.style.width = ()*100+"%";
			}
			div.addEventListener('mouseup', function () {
				var event = e || event;
				document.removeEventListener('mousemove', mouseM);
			});
		});
	},
	methods: {
		oncanplay(e) {
			let _const = this,
				musicObj = _const.$refs.audio;
			_const['playObj']['ref'] = _const.$refs.audio;
			// musicObj.currentTime = 10;
			_const['playObj']['startTime'] = musicObj.currentTime;
			_const['playObj']['allTime'] = musicObj.duration;
			musicObj.volume = _const['playObj']['voice']['value'] / 100;
			// 获取音频源
			console.log(_const.$refs, _const['playObj']['allTime'], _const.$refs);
		},
		audioUpdate(e) {
			// 进度更新时
			let _const = this,
				musicObj = _const['playObj']['ref'];
			_const['playObj']['state'] = true;
			let addAllTime = _const['playObj']['allTime'] * (1 + _const['playObj'].icon.PCT);
			let PCT = musicObj.currentTime / addAllTime;
			let truePCT = PCT;
			_const['$refs'].progressBar.style.left = truePCT * 100 + '%';
			// _const["playObj"]["startTime"] = musicObj.currentTime;
		},
		pause(e) {
			let _const = this;
			_const['playObj']['state'] = false;
		},
		init() {
			let _const = this,
				musicObj = _const.$refs.audio;
		},
		// 🔊
		voiceChange(e, v) {
			console.log(e, v);
			let _const = this;
			if (e == 'value') {
				_const['playObj']['ref'].volume = _const['playObj']['voice'][e] / 100;
			}
		},
		play() {
			let _const = this;
			if (_const['playObj']['state']) {
				_const['playObj']['ref'].pause();
			} else {
				_const['playObj']['ref'].play();
			}
			_const['playObj']['state'] = !_const['playObj']['state'];
		}
	},
	components: {
		'ant-Button': Button,
		'ant-icon': Icon
	}
};
</script>
<style type="text/css" scoped src="./icon.css"></style>
<style lang="scss" scoped>
@-webkit-keyframes musicBG /* Safari 和 Chrome */ {
	0 {
		background: #eee;
		transform: rotate(0deg);
	}
	20% {
		background: #e8e8e8;
		transform: rotate(72deg);
	}
	40% {
		background: #e9e7e8;
		transform: rotate(144deg);
	}
	60% {
		background: #70e1f5;
		transform: rotate(216deg);
	}
	80% {
		background: #8ca6db;
		transform: rotate(288deg);
	}
	100% {
		background: #ffd194;
		transform: rotate(360deg);
	}
}
@-webkit-keyframes barTran /* Safari 和 Chrome */ {
	0 {
		background: #5efce8;
		transform: rotate(0deg);
	}
	100% {
		background: #736efe;
		transform: rotate(360deg);
	}
}
.absolute {
	position: absolute;
}
.bottom {
	position: fixed;
	bottom: 0px;
	width: 100vw;
	background: #fff;
	.musicBG {
		margin: 0 5px;
		animation-name: musicBG;
		animation-duration: 10s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		// animation-direction: alternate;

		width: 5rem;
		height: 5rem;
		border-radius: 50%;
		border: 1px solid #eee;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.progress {
		padding: 5px;
		flex: 1;
		border-radius: 15px 0 0 15px;
		box-shadow: 0px 0px 2px black;
		.relative {
			position: relative;
			background: yellow;
			width: 80%;
			margin: auto;
			height: 1.4rem;
			border-radius: 10px;
			overflow: hidden;
			.bar {
				width: 100%;
				border-radius: 10px;
				right: 0;
				background: #eee;
				svg {
					background: white;
					border-radius: 50%;
				}
				.animationSvg {
					animation-name: barTran;
					animation-duration: 10s;
					animation-timing-function: linear;
					animation-iteration-count: infinite;
				}
			}
			.showBar {
				width: 100%;
				height: 1.4rem;
				background-image: linear-gradient(to left, #d299c2 0%, #fef9d7 100%);
				// z-index: -1;
			}
		}
		.playButton {
			margin: 5px;
			div {
				align-items: center;
				text-align: center;
				&:nth-child(1),
				&:nth-child(3) {
					flex: 1;
				}
				&:nth-child(2) {
					flex: 2;
					span {
						color: #fff;
						display: flex;
						width: 2rem;
						height: 2rem;
						background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
						border-radius: 50%;
						justify-content: center;
						align-items: center;
						margin: auto;
					}
				}
			}
		}
	}
}
</style>
